/**
 * 下拉选择框
 * add by lifenping on 2020.02.26
 */
import { Form, Select } from 'antd';
import React from 'react';

const FormItem = Form.Item;
const { Option } = Select;

interface OptionsProps {
  key: any;
  text: string;
  disabled?: boolean;
}

interface PropsType {
  type?: string;
  label?: string;
  name: string;
  initialValue?: any;
  itemLayout?: {};
  rules?: object[];
  size?: string;
  placeholder?: string;
  options?: OptionsProps[];
  getPopupContainer?: any;
  getFieldDecorator?: any;
  style?: any;
  mode?: string;
  showSearch?: boolean;
  disabled?: boolean;
}

const SelectItem: React.FC<PropsType> = props => {
  const {
    label,
    name,
    options,
    initialValue,
    // 不定义默认值，否则在form中定义后，form中的itemLayout不生效，此处会把form中的覆盖掉
    // 此处在form中统一处理，如果需要覆盖则在引用此组件处进行定义
    // itemLayout={
    //   labelCol: { span: 4 },
    //   wrapperCol: { span: 14 },
    // },
    itemLayout = {},
    rules,
    getFieldDecorator,
    getPopupContainer,
    disabled,
    ...othersProps
  } = props;

  return (
    <FormItem label={label} {...itemLayout} hasFeedback={!!rules}>
      {getFieldDecorator(name, {
        initialValue,
        rules,
      })(
        <Select disabled={disabled} {...othersProps} getPopupContainer={getPopupContainer}>
          {options.length &&
            options.map(opt => (
              <Option key={opt.key} value={`${opt.key}`} disabled={opt.disabled || false}>
                {opt.text}
              </Option>
            ))}
        </Select>,
      )}
    </FormItem>
  );
};
export default SelectItem;
